ridi /
simple-service-status
| Total Complexity | 5 |
| Total Lines | 20 |
| Duplicated Lines | 0 % |
| Changes | 0 | ||
| 1 | import React from 'react'; |
||
| 3 | |||
| 4 | export default class Loading extends React.Component { |
||
| 5 | constructor(props) { |
||
| 6 | super(props); |
||
| 7 | this.state = { |
||
| 8 | style: { display: 'none' }, |
||
| 9 | }; |
||
| 10 | } |
||
| 11 | |||
| 12 | componentWillReceiveProps(newProps) { |
||
| 13 | if (newProps.show) { |
||
| 14 | this.setState({ style: {} }); |
||
| 15 | } else if (this.props.show && !newProps.show) { // true => false |
||
| 16 | // set display to 'none' after 1 sec (for fade-out animation) |
||
| 17 | setTimeout(() => this.setState({ style: { display: 'none' } }), 1000); |
||
| 18 | } |
||
| 19 | } |
||
| 20 | |||
| 21 | render() { |
||
| 22 | return <div className={`loading-backdrop fade ${this.props.show ? 'in' : ''}`} style={this.state.style}><div className="loading" /></div>; |
||
| 23 | } |
||
| 33 |
